import { Form, Input, Select, message } from "antd";
import { reqCategory } from "../../api";
import React, { useEffect, useState } from "react";

import propTypes from "prop-types";
const { Option } = Select;
const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 20,
  },
};

const AddCategoryForm = (props) => {
  const data = [
    {
      parentId: "0",
      _id: "0",
      name: "一级分类",
      __v: 0,
    },
    ...props.category,
  ];
  const [form] = Form.useForm();
  props.handleForm(form);

  return (
    <Form
      {...layout}
      form={form}
      initialValues={{ parentId:props.parentId}}
      name="control-hooks"
    >
      <Form.Item
        name="categoryName"
        label="分类名称"
        rules={[
          {
            required: true,
            message: "请输入分类名称",
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="parentId"
        label="所属分类"
        rules={[
          {
            required: true,
            message: "请选择所属分类",
          },
        ]}
      >
        <Select placeholder="选择一个父集分类" allowClear>
          {data.map((item) => (
            <Option key={item._id} value={item._id}>
              {item.name}
            </Option>
          ))}
        </Select>
      </Form.Item>
    </Form>
  );
};
AddCategoryForm.propTypes = {
  category: propTypes.array.isRequired,
  parentId:propTypes.string.isRequired
};
export default React.memo(AddCategoryForm);
